<!--私信黑名单管理-->
<script lang="ts" setup>
import {onMounted} from "vue";
import {useMessageStore} from "../../store/MessageStore.ts";
import {useUserStore} from "../../store/UserStore.ts";
import {ElMessage, ElMessageBox} from "element-plus";
import UserSimpleCard from "../entrance/UserSimpleCard.vue";
import type {SimpleUserInfo} from "../../network/types/User.ts";

const messageStore = useMessageStore();
const userStore = useUserStore();

const list = (force: boolean = false) => messageStore.blockList(force)
// 弹窗要求输入用户id或用户名，查询该用户信息，用户存在则添加到私信黑名单
const blockAdd = () => {
  // 弹窗要求输入用户id或用户名
  ElMessageBox.prompt("请输入用户id或用户名", "添加黑名单").then(async ({value}) => {
    const userId = (await userStore.detailHtmlText(value)).userId;
    if (!userId) {
      ElMessage.error("用户不存在")
      return
    }
    // 用户存在，添加到私信黑名单
    const res = await messageStore.blockAdd(userId)
    ElMessage.success(res)
    await list()
  })
}

const blockDel = (user: SimpleUserInfo) => {
  ElMessageBox.confirm(`确定删除黑名单用户 ${user.username}`, "删除黑名单用户").then(() => {
    messageStore.blockDel(user.userId).then(res => {
      ElMessage.success(res)
      list()
    }).catch(r => {
      console.error(r)
    })
  })
}

onMounted(() => {
  list()
})

</script>

<template>
  <div>
    <h2>
      <el-button-group>
        <el-button type="success" @click="blockAdd">添加</el-button>
        <el-button type="success" @click="list(true)">刷新</el-button>
      </el-button-group>
    </h2>
    <!--用户名单-->
    <div v-if="!messageStore.blockedUser || messageStore.blockedUser.length===0">
      暂无数据
    </div>
    <div v-if="messageStore.blockedUser" style="text-align: start">
      <template v-for="user in messageStore.blockedUser">
        <div style="display: inline-block;margin-right: 5px"><span style="display: flex;align-items: center">
          <user-simple-card :data="user" style="margin-right: 5px"/>
          <el-button type="danger" @click="blockDel(user)">删除</el-button>
        </span></div>
      </template>
    </div>
  </div>

</template>

<style scoped>

</style>